<template>
  <div class="zong">
    <div class="tou">
      <el-page-header title="" @back="goBack" content="领劵中心">
      </el-page-header>
    </div>
    <div class="zhong">
      <div class="kuang">
        <div class="list" v-for="(item, index) in length" :key="index">
          <div class="zuo">{{ data[index].jine }}</div>
          <div class="you">
            <div class="y_zuo">{{ data[index].quanxian }}</div>
            <div class="y_you">
              <button @click="lq_fn(index)">领取</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkList: ["没过期"],
      data: "",
      length: "",
    };
  },
  methods: {
    goBack() {
      this.$router.push("/wode");
    },
    lq_fn(index) {
      console.log(index);
      console.log(this.data[index])
      this.axios({
        method: "post",
        url: "http://localhost:3000/my_yohuijuan",
        data: {
          jine: this.data[index].jine,
          quanxian: this.data[index].quanxian,
          qixian: this.data[index].qixian,
        },
        processData: false,
        contentType: false,
      })
        .then((res) => {
          console.log(res)
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mounted() {
    console.log(11111); 
    this.axios({
      method: "post",
      url: "http://localhost:3000/yohuijuan",
      processData: false,
      contentType: false,
    })
      .then((res) => {
        this.data = res.data.data;
        this.length = this.data.length;
        console.log(this.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
.tou {
  height: 40px;
  background-color: rgb(1, 154, 254);
  padding-top: 20px;
  font-size: 16px;
  position: relative;
}
.zhong {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.kuang {
  /* padding-top: 10px; */
  width: 95%;
  /* height: 200px; */
  border-radius: 5px 5px;
  background-color: rgb(76, 147, 214);
}
.list {
  display: flex;
  height: 70px;
  border: 1px solid rgb(156, 163, 184);
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: rgb(225, 228, 214);
  color: rgb(182, 58, 58);
}
.xuanze {
  height: 30px;
}
.zuo {
  flex: 1;
  /* background-color: aqua; */
  font-size: 36px;
  text-align: center;
  margin: auto;
}
.you {
  flex: 4;
  /* background-color: bisque; */
  display: flex;
}
.y_zuo {
  flex: 3;
  text-align: center;
  margin: auto;
}
.y_you {
  flex: 2;
  margin: auto;
}
</style>
